<template>
  <view class="appearance" :style="styles">
    <slot></slot>
  </view>
</template>
<script>
const rpx = num => Number.isNaN(Number(num)) ? num : num + 'rpx'
export default {
  name: 'Appearance',
  props: ['item'],
  computed: {
    styles () {
		if(this.item.boxModelStyle) {
			const { backgroundColor, background, padding = '', margin = '', width, height, borderRadius, position, offset = '', zIndex } = this.item.boxModelStyle
			const [top, right, bottom, left] = offset.split(',')
			return {
			  margin: margin.replace(/[\d\.]+/g, val => val + 'rpx'),
			  padding: padding.replace(/[\d\.]+/g, val => val + 'rpx'),
			  position,
			  top: rpx(top),
			  left: rpx(left),
			  right: rpx(right),
			  bottom: rpx(bottom),
			  width: rpx(width),
			  height: rpx(height),
			  zIndex,
			  borderRadius: rpx(borderRadius),
			  background,
			  backgroundColor
			}
		} else {
			return {}
		}

    }
  }
}
</script>
<style scoped>
.appearance {
  box-sizing: border-box;
}
</style>